window.onload = function() {
    Vue.createApp({
        data() {
          return { 
             input:'',
             items:[{name:'Vue2.x',check:false,id:1},{name:'Vue3.x',check:true,id:3}],
             newItmes:[],
             tabs:[
                 {id:0,name:'所有计划'},
                 {id:1,name:'已完成'},
                 {id:2,name:'未完成'}
             ],
             currentIndex:0
           }
        },
        computed:{
           total() {
               return this.items.length
           },
           confNum() {
               return this.items.filter(item=> item.check).length
           },
           noNum() {
               return this.items.filter(item=> !item.check).length
           }

        },
        mounted(){
            this.tabChage(this.currentIndex)
        },

        methods:{
            add() {
               if(!this.input){alert("请添加数据")};
               if(this.items.length > 0) {
                    let _id = Math.max(...this.items.map(item=>item.id)) + 1;
                    this.items.unshift({name:this.input,check:false,id:_id});
               }else{
                   this.items.unshift({name:this.input,check:false,id:1});
               }
              
               this.input = '';
            },
            delEvent(index){
               this.items = this.items.filter(item=> item.id != index)
               this.tabChage(this.currentIndex)
            },
            tabChage(index) {
                this.currentIndex = index || this.currentIndex
                switch(index) {
                    case 1:
                        this.newItmes = this.items.filter(item=>item.check)
                        break;
                    case 2:
                        this.newItmes = this.items.filter(item=>!item.check)
                        break;
                    default:
                        this.newItmes = this.items
                        this.currentIndex = 0
                }
            }
        }
      }).mount('#app')
      

 
}